import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
// export default {
//     install(Vue) {
//         Vue.prototype.htmlToPdf = function (name, title) {
//             html2canvas(document.querySelector('#' + name), {
//                 // allowTaint: true,
//                 useCORS: true,
//                 scale: 2, // 提升画面质量，但是会增加文件大小
//                 dpi: window.devicePixelRatio * 1,
//             }).then((canvas) => {
//                 console.log(canvas);
//                 const contentWidth = canvas.width
//                 const contentHeight = canvas.height

//                 console.log(contentWidth);
//                 /* 導出不分页处理 */
//                 const pageData = canvas.toDataURL('image/jpeg', 1.0)

//                 // const pdfWidth = (contentWidth + 10) / 2 * 0.75
//                 const pdfWidth = contentWidth  / 4
//                 const pdfHeight = (contentHeight + 200) / 2 * 0.75 // 500為底部留白

//                 const imgWidth = pdfWidth
//                 const imgHeight = (contentHeight / 2 * 0.75) // 内容圖片这里不需要留白的距离

//                 const PDF = new jsPDF('', 'pt', [pdfWidth + 50, pdfHeight + 100,])
//                 PDF.addImage(pageData, 'jpeg', 33, 33, imgWidth, imgHeight)
//                 PDF.save(title + '.pdf')
//             })
//         };
//     },
// }


export default {
    install(Vue) {
      Vue.prototype.htmlToPdf = async function (name, title) {
        const ele = document.querySelector('#' + name)
        const eleW = ele.offsetWidth// 获得该容器的宽
        const eleH = ele.offsetHeight// 获得该容器的高
      
        const eleOffsetTop = ele.offsetTop // 获得该容器到文档顶部的距离
        const eleOffsetLeft = ele.offsetLeft // 获得该容器到文档最左的距离
      
        var canvas = document.createElement('canvas')
        var abs = 0
      
        const win_in = document.documentElement.clientWidth || document.body.clientWidth // 获得當前可视窗口的宽度（不包含滚动条）
        const win_out = window.innerWidth // 获得當前窗口的宽度（包含滚动条）
      
        if (win_out > win_in) {
          // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
          abs = (win_out - win_in) / 2 // 获得滚动条宽度的一半
          // console.log(a, '新abs');
        }
      
        canvas.width = eleW * 2 // 将画布宽&&高放大两倍
        canvas.height = eleH * 2
      
        var context = canvas.getContext('2d')
      
        context.scale(2, 2)
      
        context.translate(-eleOffsetLeft - abs, -eleOffsetTop)
        // 这里默认横向没有滚动条的情况，因為offset.left(),有无滚动条的时候存在差值，因此
        // translate的时候，要把这个差值去掉
      
        var pdf = new JsPDF('', 'pt', 'a4')
        const childrenBox = ele.children
        for (let i = 0; i < childrenBox.length; i++) { // 循环传過来的Dom的字节点 每个子节点打印成一页pdf A4纸那么大
          console.log(childrenBox,'childrenBox');
          console.log(1111);
          const res = await html2Canvas(childrenBox[i], {
            dpi: 300,
            // allowTaint: true,  //允许 canvas 污染， allowTaint參數要去掉，否则是无法通過toDataURL導出canvas數据的
            useCORS: true, // 允许canvas画布内 可以跨域請求外部链接圖片, 允许跨域請求。
            scale: 4, // 提升導出的文件的分辨率
          })
          var pageData = res.toDataURL('image/jpeg', 1.0)
          var contentWidth = res.width
          var contentHeight = res.height
          var imgWidth = 555.28
          var imgHeight = 552.28 / contentWidth * contentHeight
          pdf.addImage(pageData, 'JPEG', 20, 20, imgWidth, imgHeight)
          if (i < childrenBox.length - 1) {
            pdf.addPage() // 避免最后多一个空白页
          }
        }
  
        pdf.save(`${title}.pdf`);
      };
    },
  }
